<template>
  <view class="filter-box">
    <!-- <view class="cu-modal" :class="{ show: showSel }" @tap="hideModal"></view> -->
    <view class="navbar">
      <!-- 			<view class="sel-box u-flex-col" v-show="showSel">
              <view class="sel-item" @tap="onSel(0)" :class="{ 'sel-active': defaultOrder === 0 && filterIndex === 0 }">综合</view>
              <view class="sel-item" @tap="onSel(1)" :class="{ 'sel-active': defaultOrder === 1 && filterIndex === 0 }">扩展自定义排序</view>
            </view> -->
      <!-- 			<view class="nav-item u-flex-col" :class="{ current: filterIndex === 0 }" @tap="tabClick(0)">
              <view class="title-box  u-flex u-col-center">
                <text class="filter-title">{{ defaultOrder === 1 ? '自定义' : '综合' }}</text>
                <view class="p-box"><text style="font-size: 22rpx;" :class="{ active: filterIndex === 0 }" class="u-iconfont uicon-arrow-up u-m-l-6"></text></view>
              </view>
              <view class="line" :class="{ 'line-active': filterIndex === 0 }"></view>
            </view> -->
      <view class="nav-item u-flex-col" :class="{ current: filterIndex === 0 }" @tap="tabClick(0)">
        <view class="title-box u-flex"><text class="filter-title">综合</text></view>
        <view class="line" :class="{ 'line-active': filterIndex === 0 }"></view>
      </view>
      <view class="nav-item u-flex-col" :class="{ current: filterIndex === 3 }" @tap="tabClick(3)">
        <view class="title-box u-flex"><text class="filter-title">销量</text></view>
        <view class="line" :class="{ 'line-active': filterIndex === 3 }"></view>
      </view>
      <view class="nav-item u-flex-col" :class="{ current: filterIndex === 2 || filterIndex === 6 }" @tap="tabClick(2)">
        <view class="title-box u-flex">
          <text class="filter-title">价格</text>
          <view class="p-box u-flex-col u-m-l-6">
            <view
                class="u-iconfont uicon-arrow-up"
                :style="{ fontSize: '20rpx', lineHeight: '18rpx', color:  filterIndex === 6 ? '#d5a65a' : '#333' }"
            ></view>
            <view
                class="u-iconfont uicon-arrow-down"
                :style="{ fontSize: '20rpx', lineHeight: '18rpx', color:  filterIndex === 2 ? '#d5a65a' : '#333' }"
            ></view>
          </view>
        </view>
        <view class="line" :class="{ 'line-active': filterIndex === 2 || filterIndex === 6 }"></view>
      </view>
      <view class="nav-item u-flex-col" :class="{ current: filterIndex === 4 }" @tap="tabClick(4)">
        <view class="title-box"><text class="filter-title">评分</text></view>
        <view class="line" :class="{ 'line-active': filterIndex === 4 }"></view>
      </view>
    </view>
  </view>
</template>

<script>
/**
 * 商品筛选组件
 *
 */
import { mapState, mapActions, mapMutations } from 'vuex';
export default {
  components: {},
  props: {},
  data() {
    return {
      filterIndex: 0,
      showSel: false, //综合选择
      defaultOrder: 0, //综合
      priceOrder: 0, //价格
      salesOrder: 0, //销量
      newProdcutOrder: 0 //新品优先
    };
  },
  computed: {
    filterData() {
      const data = {
        defaultOrder: this.defaultOrder,
        priceOrder: this.priceOrder,
        salesOrder: this.salesOrder,
        newProdcutOrder: this.newProdcutOrder
      };
      return data;
    }
  },
  onLoad() {},
  methods: {
    //筛选
    tabClick(index) {
      if(index == 2){
        this.filterIndex = this.filterIndex == 2 ? 6 : 2;
      }else{
        this.filterIndex = index;
      }

      this.$emit('change', this.filterIndex);
    },
    onSel(dot) {
      this.defaultOrder = dot;
      this.$emit('change', this.filterData);
      this.showSel = false;
    },
    hideModal() {
      this.showSel = false;
    }
  }
};
</script>

<style lang="scss">
.sel-box {
  position: absolute;
  width: 750rpx;
  height: 140rpx;
  background: rgba(246, 246, 246, 1);
  border-radius: 0px 0px 20rpx 20rpx;
  z-index: 999;
  left: 50%;
  transform: translateX(-50%);
  bottom: -138rpx;
  transition: all ease-out 0.2s;
  .sel-item {
    color: #333;
    padding: 20rpx 40rpx 0;
    font-size: 24rpx;
    font-weight: 500;
  }
  .sel-active {
    color: #d5a65a;
    font-size: 26rpx;
    font-weight: 600;
  }
}
.filter-box {
  width: 750rpx;
}
.navbar {
  display: flex;
  width: 750rpx;
  height: 95rpx;
  background: #fff;
  border-bottom: 1upx solid #e6e6e6;
  position: relative;
  z-index: 999;
  .nav-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 30rpx;
    position: relative;
    .filter-title {
      font-size: 28rpx;
      color: #333;
      //font-weight: 600;
    }
    .line {
      width: 110rpx;
      height: 4rpx;
      background: transparent;
      position: absolute;
      bottom: 0;
      z-index: 2;
    }

    .line-active {
      background: #f86522;
    }

    .p-box {
      display: flex;
      flex-direction: column;
    }
  }
}

.current {
  color: #d5a65a;
}
</style>